<template>
    <div id="village">
        <div style="background-color: white;padding: 10px;">
            <el-table border :data="xzlist"
                style="width: 850px" height="500">
                <el-table-column align="center" type="index" label="序号" width="60" />
                <el-table-column prop="code" label="行政代码" width="140" />
                <el-table-column prop="name" label="乡,镇,办事处" width="180" />
                <el-table-column prop="geom" label="地图注记" />
                <el-table-column label="编辑" width="80">
                    <template #default="scope">
                        <el-icon style="cursor: pointer;" @click="openmap(scope.row)">
                            <Location />
                        </el-icon>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog :before-close="cancel" v-model="mapshow" title="使用鼠标单击,即可获取地图坐标">
            <!-- <div class="map" id="map"></div> -->
            <!-- <router-view style="width: 500px;"></router-view> -->
            <xzmap style="width: 100%;height: 500px;"></xzmap>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel()">取消</el-button>
                    <el-button type="primary" @click="sureupdate()">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import $mapreq from "../../api/mapreq";
import { useRouter } from "vue-router";
import xzmap from "./xzmap.vue";
import { dataStore } from "../../store/data";
const $store = dataStore();
const mapshow = ref(false);
const $router = useRouter();
const xzlist = ref([]);
onMounted(() => {
    getlist();
    // init();
});
function sureupdate() {
    let obj = {}
    obj.code = $store.code;
    obj.geom = $store.checkgeo;
    $mapreq.stateReDivide(obj).then(res => {
        if (res.code == 200) {
            getlist();
            mapshow.value = false;
        }
    })

}
function openmap(e) {
    $store.geom = e.geom;
    $store.name = e.name;
    $store.code = e.code;
    mapshow.value = true;
}
function cancel() {
    $store.name = '';
    mapshow.value = false;
}
function getlist() {
    $mapreq.getstate().then(res => {
        if (res.code == 200) {
            xzlist.value = res.data.child;
            let obj = {};
            obj.code = res.data.code;
            obj.geom = res.data.geom;
            obj.name = res.data.name;
            xzlist.value.unshift(obj);
            console.log(xzlist);
        }
    });
}
</script>

<style lang="less">
#village {
    padding: 20px;
}

#map {
    height: 100%;

    .ol-overlaycontainer-stopevent {
        display: none;
    }

    .ol-zoom-out {
        display: none;
    }

    .ol-zoom-in {
        display: none;
    }
}
</style>
